<style scoped >
    /*新增，编辑表单*/
    .center .ivu-input-wrapper {
        width: 90%;
    }
</style>
<template>
    <div class="console-product">
        <!-- 头部-->
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">物流中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">客户档案</span>
                </div>
            </i-col>
            <i-col class="fr">
                <Button @click="addCusFiles" ><i class="iconfont" style="color:#37b3b3;">&#xe6bf;</i> 新增客户档案</Button>
                <Modal class-name="popup" v-model="CusFilesModal" width="400" @on-cancel="cancelPicOrder('CusFilesValidate')" :mask-closable="false" >
                    <p slot="header" style="color: #eeebeb;" v-drag>
                        <span v-if="addCus">新增客户档案</span>
                        <span v-if="editorCus">编辑客户档案</span>
                    </p>
                    <div class="center">
                        <Form  ref="CusFilesValidate" :model="CusFilesValidate" :rules="ruleCusFiles"  label-position="left" :label-width="90">
                            <Row>
                                <input type="hidden" name="id" v-model="CusFilesValidate.id">
                                <i-col span="24">
                                    <Form-item label="客户名:" prop="username">
                                        <Input :disabled="disabled" v-model="CusFilesValidate.username"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="订单前缀:" prop="orderPrefix">
                                        <Input v-model="CusFilesValidate.orderPrefix"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="成交方式:" prop="tradeWay">
                                        <Input v-model="CusFilesValidate.tradeWay"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="方式简称:" prop="wayShort">
                                        <Input v-model="CusFilesValidate.wayShort"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="客户名简称:" prop="nameShort">
                                        <Input v-model="CusFilesValidate.nameShort"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="价格:" prop="price">
                                        <Input v-model="CusFilesValidate.price" type="textarea" :rows="1"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                        </Form>
                    </div>
                    <div slot="footer">
                        <div class="footer">
                            <Button v-if="addCus" class="save" :loading="modal_loading" @click="addPicOrder('CusFilesValidate')">保存</Button>
                            <Button v-if="addCus" class="clear" @click="clearPicOrder('CusFilesValidate')">清空</Button>
                            <Button v-if="editorCus" class="save" :loading="modal_loading" @click="savePicOrder('CusFilesValidate')">保存</Button>
                        </div>
                    </div>
                </Modal>
            </i-col>
        </Row>
        <!-- 头部结束-->
        <!-- 中间主体-->
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <!-- 搜索-->
            <Form class="searchform" ref="CusFilesForm" :model="CusFilesForm" inline >
                <Form-item label="客户名:" :label-width="50" style="width:160px;">
                    <Input v-model="CusFilesForm.username" @on-enter="CusFilesFormSearch"></Input>
                </Form-item>
                <Form-item label="订单前缀:" :label-width="65" style="width:175px;">
                    <Input v-model="CusFilesForm.orderPrefix" @on-enter="CusFilesFormSearch"></Input>
                </Form-item>
                <Form-item label="成交方式:" :label-width="65" style="width:175px;">
                    <Input v-model="CusFilesForm.tradeWay" @on-enter="CusFilesFormSearch"></Input>
                </Form-item>
                <Form-item label="创建时间:" :label-width="65"style="width:265px;">
                    <Date-picker type="daterange" v-model="CusFilesForm.createTime" :options="creatDate0ptions" placement="bottom-start" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="CusFilesFormSearch">搜索</Button>
                </Form-item>
            </Form>
            <!-- 搜索结束-->
            <!-- 表格-->
            <Modal v-model="delModal" class-name="delect" width="250" :loading="delLoading" @on-cancel="delCancel" :mask-closable="false" >
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow"  stripe border :columns="CusFilesColumns" :data="CusFilesData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            /*const validateZH = (rule, value, callback) => {
                var re = /^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
                if (re.test(value)) {
                    callback();
                } else {
                    callback(new Error('请输入数字（小数点后保留两位）'));
                }
            };*/
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,
                addCus:false,
                editorCus:false,
                disabled:false,
                delModal:false,
                delLoading:false,
                CusFilesForm:{//客户档案条件查询
                    username:"",
                    orderPrefix:"",
                    tradeWay:"",
                    createTime:[new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]
                },
                creatDate0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //客户档案数据格式
                CusFilesColumns:[
                    {
                        width:'3%',
                        title: '序号',
                        type: 'index'
                    },
                    {
                        width:'5%',
                        title: '客户名',
                        key: 'username',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.username,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.username)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '订单前缀',
                        key: 'orderPrefix',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderPrefix,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.orderPrefix)]);
                        }
                    },
                    {
                        width:'9%',
                        title: '成交方式',
                        key: 'tradeWay',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.tradeWay,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.tradeWay)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '方式简称',
                        key: 'wayShort',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.wayShort,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.wayShort)]);
                        }
                    },
                    {
                        width:'37%',
                        title: '价格',
                        key: 'price',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.price,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.price)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '创建时间',
                        key: 'createTime',
                        render: (h, params) => {
                            const text = params.row.createTime != null ? new Date(params.row.createTime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '创建人',
                        key: 'createBy',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.createBy,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.createBy)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '操作',
                        key: 'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editCusFiles(params.row.username)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.removeCusFiles(params.row.username)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ])
                            ]);
                        }
                    }
                ],
                //必填项
                ruleCusFiles: {
                    username: [
                        { required: true, message: '请输入客户名', trigger: 'blur' },
                        { type: 'string', max: 50, message: '客户名不能大于50位', trigger: 'blur' }
                    ],
                    orderPrefix: [
                        { required: true, message: '请输入订单前缀', trigger: 'blur' },
                        { type: 'string', max: 20, message: '订单前缀不能大于20位', trigger: 'blur' }
                    ],
                    wayShort: [
                        { required: true, message: '请输入方式简称', trigger: 'blur' },
                        {type: 'string', max: 20, message: '方式简称不能大于20位', trigger: 'blur' }
                    ],
                    tradeWay: [
                        { required: true, message: '请输入成交方式', trigger: 'blur' },
                        { type: 'string', max: 50, message: '成交方式不能大于50位', trigger: 'blur' }
                    ],
                    nameShort: [
                        { required: true, message: '请输入客户简称', trigger: 'blur' },
                        {type: 'string', max: 20, message: '客户简称不能大于20位', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入价格', trigger: 'blur' },
                       /* {type: 'string', validator: validateZH, trigger: 'blur'},*/
                        {type: 'string', max: 200, message: '价格不能大于200位', trigger: 'blur' }
                    ],
                    createBy: [
                        { required: true, message: '请输入创建人', trigger: 'blur' }
                    ],
                },
                //客户档案数据
                CusFilesData:[],
                CusFilesValidate: {
                    id:'',
                    username: '',
                    orderPrefix: '',
                    wayShort: '',
                    tradeWay: '',
                    price: '',
                    nameShort:'',
                },
                CusFilesModal: false
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            }
            this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            CusFilesTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var username = formData.username;//客户名
                var orderPrefix = formData.orderPrefix;//订单前缀
                var tradeWay = formData.tradeWay;//成交方式
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.createTime.length != 0 && formData.createTime[0] != null && formData.createTime[1] != null){
                    var fromDateTime = (new Date(formData.createTime[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.createTime[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        username : username,
                        orderPrefix : orderPrefix,
                        tradeWay : tradeWay,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/customerArchives',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.CusFilesData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            CusFilesFormSearch(){
                this.currentPage = 1;
                this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
            },
            //新增客户档案
            addCusFiles() {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.disabled = false;
                this.CusFilesModal=true;
                this.addCus=true;
                this.editorCus=false;
            },
            //根据ID编辑客户档案
            editCusFiles(column) {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.disabled=true;
                this.addCus=false;
                this.editorCus=true;
                axios.get('/customerArchive/ '+ column).then(res => {
                    this.CusFilesValidate = res.data;
                    this.CusFilesModal=true;
                }).catch(err =>{
                })
            },
            //根据ID删除客户档案
            removeCusFiles(column) {
                this.delModal=true;
                this.delId = column;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/customerArchive/'+this.delId).then(res => {
                    this.delLoading = false;
                    this.delModal=false;
                    this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                });
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //新增保存
            addPicOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post('/customerArchives', this.CusFilesValidate).then(res => {
                            this.modal_loading = false;
                            this.CusFilesModal = false;
                            this.addCus = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('新增成功');
                            this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                            this.$Message.error({content: err,duration: 0,closable:true});
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //编辑保存
            savePicOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/customerArchives', this.CusFilesValidate).then(res => {
                            this.modal_loading = false;
                            this.CusFilesModal = false;
                            this.editorCus = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('编辑成功');
                            this.CusFilesData = this.CusFilesTableData(this.CusFilesForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                            this.$Message.error({content: err,duration: 0,closable:true});
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //关闭客户档案
            cancelPicOrder (name) {
                this.CusFilesModal = false;
                this.addCus=false;
                this.editorCus=false;
                this.disabled=true;
                this.$refs[name].resetFields();
            },
            //清空客户档案
            clearPicOrder (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>